<!-- 系统账号 -->
<template>
<div class="container">
    <router-view />
    <!-- 控件 -->
    <div class="controlBox">
        <el-form ref="form" :inline="true" :model="search" label-width="80px" size="mini">
            <el-form-item label="房间名">
                <el-input v-model="search.name" placeholder="通过房间名称进行搜索"></el-input>
            </el-form-item>
            <el-form-item label="房间类型">
                <el-input v-model="search.type" placeholder="通过房间类型进行搜索"></el-input>
            </el-form-item>
            <el-form-item label="房间地址">
                <el-input v-model="search.location" placeholder="通过房间地址进行搜索"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="getDictListFun">搜 索</el-button>
            </el-form-item>
        </el-form>

        <el-button slot="reference" type="primary" size="mini" @click="goToPage">+ 新增房间</el-button>
        <el-button slot="reference" type="primary" size="mini">删除房间</el-button>
        <el-button slot="reference" type="primary" size="mini">批量导出</el-button>

    </div>
    <!-- 列表 -->
    <el-table ref="multipleTable" :data="tableData" height="700px" :header-cell-style="{background:'#efefef'}" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="id" label="房间编号" />
        <el-table-column prop="name" label="房间名" />
        <el-table-column prop="totalBedNum" label="床位总数" />
        <el-table-column prop="freeBedNum" label="空闲床位" />
        <el-table-column prop="location" label="房间地址" />
        <el-table-column prop="type" label="房间类型" />
        <el-table-column fixed="right" label="操作">
            <template slot-scope="scope">
                <el-button type="text" size="small" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">管理房间</el-button>
                <el-button type="text" style="color:#f56c6c" size="small" icon="el-icon-delete" @click="handleDelete(scope.$index, scope.row)">移除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination class="controlBox" style="margin-top:20px" background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[5, 10, 20, 40]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>
</div>
</template>

<script>
import {
    getRoomList,
    searchRoom,
    delRoom
} from "@/api/user";
export default {
    components: {},
    data() {
        return {
            centerDialogVisible: false,
            currentPage: 1, //  初始页
            pagesize: 10, //  每页的数据
            total: 0, //总数
            search: {
                name: '',
                type: '',
                location: ''
            },
            tableData: [
                // {
                //   id: '5144464646',
                //   freeBedNum: '0',
                //   totalBedNum: '2',
                //   name:'wS22',
                //   location: '春熙路',
                //   type: '要你管'
                // }
            ]
        }
    },
    computed: {},
    watch: {},
    created() {
        this.getRoomListFun()
    },
    mounted() {},
    updated() {}, // 生命周期 - 更新之后
    beforeDestroy() {}, // 生命周期 - 销毁之前
    destroyed() {}, // 生命周期 - 销毁完成
    activated() {},
    methods: {
        getDictListFun() {
            let type = ''
            switch (this.search.type) {
                case '自理':
                    type = 0
                    break;
                case '非自理':
                    type = 1
                    break;

                case '混合':
                    type = 2
                    break;

            }
            getRoomList(
                this.currentPage,
                this.pagesize,
                type,
                this.search.name,
                this.search.location
            ).then(res => {
                if (res.code == 2000) {
                    this.tableData = []
                    res.data.rooms.filter(item => {
                        switch (item.type) {
                            case 0:
                                item.type = '自理'
                                break;
                            case 1:
                                item.type = '非自理'
                                break;
                            case 2:
                                item.type = '混合'
                                break;

                        }
                    })
                    this.tableData = res.data.rooms;
                }
            })
        },
        submitForm(formamountBed) {
            this.$refs[formamountBed].validate((valid) => {
                if (valid) {
                    this.$message('submit!')
                } else {
                    console.log('error submit!!')
                    return false
                }
            })
        },
        goToPage() {
            this.$router.push({
                name: 'addRoom'
            })
        },
        handleSelectionChange(val) {
            this.multipleSelection = val
        },
        //管理房间
        handleEdit(index, row) {
            console.log(index, row)
            this.$router.push({
                path: 'bed',
                query: {
                    id: row.id
                }
            })
        },
        //删除
        handleDelete(index, row) {
            console.log(index, row)
            delRoom(
                row.id
            ).then(res => {
                if (res.code == 2000) {
                    this.getRoomListFun()
                    this.$message({
                        message: '删除成功',
                        type: 'success'
                    })
                }
            })
        },
        // 初始页currentPage、初始每页数据数pagesize和数据data
        handleSizeChange: function (size) {
            this.pagesize = size;
            this.getRoomListFun()
            console.log(this.pagesize) //每页下拉显示数据
        },
        handleCurrentChange: function (currentPage) {
            this.currentPage = currentPage;
            this.getRoomListFun()
            console.log(this.currentPage) //点击第几页
        },
        //获取房间列表
        getRoomListFun() {
            let type = ''
            switch (this.search.type) {
                case '自理':
                    type = 0
                    break;
                case '非自理':
                    type = 1
                    break;

                case '混合':
                    type = 2
                    break;

            }
            getRoomList(
                this.currentPage,
                this.pagesize,
                type,
                this.search.name,
                this.search.location
            ).then(res => {
                if (res.code == 2000) {
                    this.tableData = []
                    res.data.rooms.filter(item => {
                        switch (item.type) {
                            case 0:
                                item.type = '自理'
                                break;
                            case 1:
                                item.type = '非自理'
                                break;
                            case 2:
                                item.type = '混合'
                                break;

                        }
                    })
                    this.tableData = res.data.rooms;
                    this.total = res.data.total;
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.container {
    padding: 20px;

    .controlBox {
        padding-bottom: 20px;
    }
}
</style>
